<template>
  <div class="login-container">
    <div class="login-content">
      <h2>项目管理平台</h2>
      <p>Welcome to land</p>
      <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" label-width="0">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入账号" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
        </el-form-item>
<!--        <div class="forgot-password">-->
<!--          <router-link to="#">忘记密码?立即找回</router-link>-->
<!--        </div>-->
      </el-form>
      <div class="register-link">
        还没有账号？<router-link to="/register">立即注册</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import {UserLogin} from "@/service/User";

export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleLogin() {
      UserLogin(this.loginForm).then(res => {
        console.log(res.data);
        // 修正条件判断逻辑
        if (res!== 1 && res!== 2) {
          console.log('登录成功', this.loginForm);
          // 修正消息提示的参数写法
          this.$message.success('登录成功');
          // 修正sessionStorage.setItem的用法
          sessionStorage.setItem("token", res);
          // 修正路由跳转参数
          this.$router.push({ name: 'index' });
        } else if (res === 1) {
          this.$message.error('用户不存在,请先注册');
          this.$router.push({ name:'register' });
          return false;
        } else if (res === 2) {
          this.$message.error('密码错误');
          return false;
        }
      }).catch(error => {
        console.error('登录请求失败', error);
        // 可以在这里添加提示用户登录请求失败的消息
        this.$message.error('登录请求失败，请检查网络或重试');
      });
    }
  }
};
</script>

<style scoped>
.login-container {
  position: relative;
  height: 100vh;
  background-image: url('~@/assets/0862a6cda3852a5.jpg'); /* 替换为实际背景图路径 */
  background-size: cover;
  background-position: center;
}

.login-content {
  position: absolute;
  top: 50%;
  right: 10%; /* 调整登录表单与右侧的距离 */
  transform: translateY(-50%);
  width: 350px;
  padding: 30px;
  color: white;
  background-color: rgba(0, 0, 0, 0.4); /* 添加半透明背景 */
  border-radius: 10px; /* 添加圆角 */
}

.login-content h2 {
  font-size: 24px;
  margin-bottom: 15px;
}

.login-content p {
  font-size: 16px;
  margin-bottom: 30px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input__inner {
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-color: transparent;
  color: white;
}

.el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.el-button {
  width: 100%;
  height: 40px;
  font-size: 16px;
}

.forgot-password {
  text-align: center;
  margin-top: 15px;
  color: rgba(255, 255, 255, 0.6);
}

.forgot-password a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
}

.register-link {
  text-align: center;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.6);
}

.register-link a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
}
</style>
